import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@fortawesome/fontawesome-free/css/all.css'
import '@/assets/styles/main.css'
import '@/assets/styles/themes.css'
import App from './App.vue'
import router from './router'

// 初始化主题
const theme = localStorage.getItem('theme') || 'light'
document.documentElement.setAttribute('data-theme', theme)

// 恢复自定义主题设置
const customTheme = localStorage.getItem('customTheme')
if (customTheme) {
  const { color, options } = JSON.parse(customTheme)
  const root = document.documentElement
  root.style.setProperty('--primary-color', color)
  if (options.darkMode) {
    root.setAttribute('data-theme', 'dark')
  }
  root.style.setProperty('--border-radius', options.borderRadius ? 'var(--radius-md)' : '2px')
  root.style.setProperty('--spacing-base', options.compact ? '0.75rem' : '1rem')
}

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')
